<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/antd.min.css">
</head>
<body>
<div id="app">
    <a :href="dlink" id="dlink" v-show="false"></a>
    <a-page-header style="border: 1px solid rgb(235, 237, 240);" title="微信消息"></a-page-header>
    <div style="background:#ECECEC; padding:30px">
        <a-card title="" :bordered="false">
            <a-form layout="inline">
                <a-form-item label="消息内容">
                    <a-input placeholder="消息内容" v-model="query.message">
                        <a-icon style="color:rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-item>
                <a-form-item label="是否匹配到人员">
                    <a-select default-value="" style="width: 120px" @change="handleMatchChange">
                        <a-select-option value="1">
                            是
                        </a-select-option>
                        <a-select-option value="0">
                            否
                        </a-select-option>
                        <a-select-option value="">
                            全部
                        </a-select-option>

                    </a-select>

                </a-form-item>
                <a-form-item>
                    <a-button type="primary" icon="search" @click="getData()">查询</a-button>
                </a-form-item>
<!--                <a-form-item>-->
<!--                    <a-button type="primary" icon="redo" @click="query = {}">重置</a-button>-->
<!--                </a-form-item>-->
            </a-form>
            <br>
            <br>
            <br>
            <a-card title="消息列表">
                <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
                    </span>
<!--                    <span slot="action" slot-scope="text, record,index">-->
<!--                        <a-button :ref="index" type="primary" @click="downloadFile(record.id)" size="small">下载文件</a-button>-->
<!--                    </span>-->
                </a-table>
            </a-card>
        </a-card>
    </div>

</div>

<script src="js/vue.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/antd.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            dlink: "",
            pagination: {
                total: 0,
                current: 1,
                pageSize: 10,
            },
            query: {},
            columns: [
                {
                    title: '原始消息',
                    align: "center",
                    dataIndex: 'message',
                },
                {
                    title: '消息发起人',
                    align: "center",
                    dataIndex: 'sendMsg',
                },
                {
                    title: '回复收到人',
                    align: "center",
                    dataIndex: 'sendShouDao',
                },
                {
                    title: '是否匹配到人员',
                    align: "center",
                    dataIndex: 'isMatch',
                },
                {
                    title: '时间',
                    align: "center",
                    dataIndex: 'createTime',
                }
            ],
            labelCol: {span: 6},
            wrapperCol: {span: 14},
            data: [],
            taskData: []
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                let that = this;
                axios.post('/jiandaoyun/list', {
                    current: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                    message: this.query.message,
                    isMatch: this.query.isMatch,
                }).then(response => {
                    that.data = response.data.result.records
                    that.pagination.total = response.data.result.total;
                    that.loading = false;
                    that.pagination.current = response.data.result.current;
                    that.pagination.pageSize = response.data.result.size;
                })
            },
            handleTableChange(pagination, filters, sorter) {
                this.pagination.current = pagination.current;
                this.getData();
            },
            handleMatchChange (value) {
                this.query.isMatch = value
            }
        }
    })
</script>
</body>
</html>